<template>
  <div class="foot">
    <van-submit-bar
      :price="sum * 100"
      label=" "
      :button-color="flag ? '#4cd964' : '#535356'"
      :button-text="flag ? '去结算' : '还差¥20起送'"
      @submit="onSubmit"
    >
      <template #default>
        <span class="delivery">配送费￥5</span>
        <span class="iconSpan" :class="{ blue: flag,lessen: flag2 }"  @click="clickFn">
          <van-icon name="cart" size="40" color="#fff" />
        </span>
      </template>
    </van-submit-bar>

    <van-action-sheet v-model="show">
      <template #description>
        <span>购物车</span>
        <span class="clear" @click="clearFn"
          ><van-icon name="delete-o" />清空</span
        >
      </template>
      <div class="content" v-for="item in newobj" :key="item.item_id">
        <p>{{ item.name }}</p>
        <span>{{ item.specfoods[0].price }}</span>
        <van-stepper
          v-model="item.__v"
          theme="round"
          min="0"
          button-size="20"
          disable-input
        />
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
// 防抖
let timeId = null
import eventBus from '@/EventBus/index.js'
export default {
  props: ["data"], //传过来请求回来的数据就行
  data() {
    return {
      show: false,
      value: 0,
      sum: 0,
      newobj: [],

      flag2:false
    };
  },
  created(){
    eventBus.$on('animation',(res)=>{
      // 防抖
      // let timeId = null

      if (timeId != null) { // 说明之前的操作还没有执行
        clearTimeout(timeId)
      }
      timeId = setTimeout(() => {
        this.flag2 = res
        setTimeout(() => {
          this.flag2 = false
        }, 600);
      }, 300);
      
    })
  },
  methods: {
    //结算
    onSubmit() {},
    //购物车弹起
    clickFn() {
      if (this.flag) {
        this.show = true;
      }
    },
    //清空购物车
    clearFn() {
      // console.log(54,this.newobj);
      this.newobj.forEach((item) => (item.__v = 0));
      this.show = false;
      this.sum = 0;
    },
  },
  watch: {
    data: {
      immediate: true, // 立即执行
      deep: true, // 深度侦听复杂类型内变化
      handler(newVal) {
        //动态改变本地存储数据
        console.log(999999999999999);
        localStorage.setItem("shopCarData", JSON.stringify(newVal));


        // let arr = (newVal.map(obj =>obj.foods)).flat(1)//新方法
        // console.log(55,arr.filter(item=>item.__v > 0));
        this.newobj = newVal
          .map((obj) => obj.foods)
          .flat(1)
          .filter((item) => item.__v > 0);
        // console.log(67,this.newobj);
        if (this.newobj.length > 0)
          this.sum = this.newobj.reduce(
            (sum, item) => sum + item.specfoods[0].price * item.__v,
            0
          );
        // console.log(this.sum);
        if (this.newobj.length <= 0) {
          this.show = false;
          this.sum = 0;
        }
      },
    },
  },
  computed: {
    flag() {
      return this.newobj.length > 0 ? true : false;
    },
  },
};
</script>
<style lang="less" scoped>
.van-submit-bar {
  z-index: 3000;
}
.van-submit-bar__bar {
  height: 52px;
  background-color: #333;
}
.van-submit-bar__text {
  text-align: left;
}
.delivery {
  position: absolute;
  top: 33px;
  left: 102px;
  color: #fff;
  font-size: 12px;
}
.van-submit-bar__price {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 7px;
}
.van-submit-bar__button--danger {
  position: relative;
  right: -16px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 0;
  height: 52px;
  width: 133px;
}
.iconSpan {
  position: relative;
  top: -20px;
  margin-right: 20px;
  height: 60px;
  width: 60px;
  text-align: center;
  line-height: 97px;
  background-color: #3d3d3f;
  border-radius: 50%;
  border: 2px solid #444444;
}

.van-popup--bottom.van-popup--round {
  position: absolute;
  bottom: 54px;
  border-radius: 0;
}
.van-action-sheet__description {
  display: flex;
  justify-content: space-between;
  background-color: #eceff1;
  padding: 15px 13px;
  height: 48px;
  box-sizing: border-box;
  font-size: 18px;
  color: #666;
}
.clear {
  font-size: 15px;
  vertical-align: middle;
  .van-icon {
    transform: translate(-8px, 1px);
  }
}
.content {
  display: flex;
  height: 54px;
  line-height: 54px;
  p {
    margin-left: 15px;
    width: 239px;
    line-height: 25px;
  }
  span {
    margin: 0 30px 0 15px;
  }
}




.blue {
  background-color: #3190e8;
}

//购物车动画
.lessen{
      position:relative;
      animation:mymove 0.5s;
      animation-timing-function: ease-in-out; /*动画的速度曲线*/
  }
  @keyframes mymove
  {
      0%{
      transform: scale(1);  /*开始为原始大小*/
      }
      50%{
          transform: scale(0.8);
      }
      75%{
        transform: scale(1.2);
      }
      100%{
          transform: scale(1);
      }

  }
</style>
